
import React from 'react';
import { connect } from 'dva';
import { Row,Col,Table,Pagination ,Card } from 'antd';
import OrderDetails from './OrderDetails';
import style from './tradeRecord.less';
/**
 * TradeRecordsList 交易记录列表
 */
/*const TradeRecordsList = ({ 
		data,
	 }) => {
console.log('TradeRecordsList>>',data)
	const height=document.body.clientHeight

	const fieldList = data.field||[]
	const dataPage = data.page || {}
	console.log('TradeRecordsList>dataPage',dataPage)
	const columns = []
	fieldList.filter(item => item.id === 'trader').map(item => {
		columns.push({
			title: item.name,
			dataIndex: item.id,
			key: item.id,
			sorter: (a, b) => a[item.id] - b[item.id],
			width: item.name.length * 16 + 30,
			fixed: 'left'
		})
	})
	fieldList.filter(item => item.id !== 'trader').map((item, index) => {
		columns.push({
			title: item.name,
			dataIndex: item.id,
			key: item.id,
			sorter: (a, b) => a[item.id] - b[item.id],
			width: item.name.length * 16 + 25
		})
	})
	const dataSource=data.list||[]
	function onShowSizeChange(current, pageSize) {
		console.log(current, pageSize);
	}
	function onCurrentChange(current,pageSize){
		console.log('TradeRecordsList>onCurrentChange',current, pageSize);
	}

	return (
		<div>
			<Table
				columns={columns}
		 //    expandedRowRender={record => {
				//  return(
				//    <TradeDetail
				//      tradesListProps={tradesListProps}
				//      data={tradeData.find(item=>(item.trader===record.trader)&&(item.orderId===record.closeOrderId))}
				//    />
				//  )
				// }}
				dataSource={dataSource}
				rowKey='id'
				pagination={false}
			/>
			{
				dataPage?<Pagination 
					showSizeChanger 
					onShowSizeChange={onShowSizeChange}
					onChange={onCurrentChange}
					defaultCurrent={dataPage.currentpage} 
					total={dataPage.totalnum}
					showTotal={total => ` 共 ${total}`}
				/>:null
			}
			
		</div>
		
	)
}*/


/**
 * [TradeRecords 交易记录详情]
 * 引用组件 
 * TradeRecordsList 交易记录列表
 */
class TradeRecords extends React.Component {
	state={
		data:this.props.tradeRecords
	}
	componentDidMount() {
		this.fetchData(this.props)
	}
	componentWillReceiveProps(nextProps) {
		console.log('TradeRecords>nextProps',nextProps)
		if((nextProps.begindate!==this.props.begindate)||
			(nextProps.enddate!==this.props.enddate)||
			(nextProps.stock !== this.props.stock)){
			this.fetchData(nextProps)
		}
		if(nextProps.tradeRecords!==this.props.tradeRecords){
			this.setState({
				data:nextProps.tradeRecords
			})
		}
	}
	fetchData=(props)=>{
		props.dispatch({
			type: `dailyReplay/getTradeRecords`,
			payload:props
		})
	}
	onExpand=(e,record)=>{
		
	}
	onShowSizeChange=(current, pageSize)=> {
		console.log(current, pageSize);
		this.fetchData({
			...this.props,
			currentpage:current,
			pagesize:pageSize
		})
	}
	onCurrentChange=(current,pageSize)=>{
		console.log('TradeRecordsList>onCurrentChange',current, pageSize);
		this.fetchData({
			...this.props,
			currentpage:current,
			pagesize:pageSize
		})
	}
	render() {
		const { data } = this.state;
		const fieldList = data.field||[];
		const dataPage = data.page || {};
		const dataSource = data.list||[];
		const columns = [];
		const pageSizeOptions = ['15', '25', '35', '45'];
		console.log('TradeRecordsList>dataPage',dataPage)
		fieldList.filter(item => item.id === 'trader').map(item => {
			columns.push({
				title: item.name,
				dataIndex: item.id,
				key: item.id,
				sorter: (a, b) => a[item.id] - b[item.id],
			})
		})
		fieldList.filter(item => item.id !== 'trader').map((item, index) => {
			columns.push({
				title: item.name,
				dataIndex: item.id,
				key: item.id,
				sorter: (a, b) => a[item.id] - b[item.id],
			})
		})
		
		console.log('getTradeRecords>',this.props)
		return (
			<Card>
				<Row>
					<Table
						columns={columns}
				    expandedRowRender={record => {
				    	console.log('expandedRowRender>',record)
						 	return(
						   	<OrderDetails
						   		{...record}
						   	/>
						 	)
						}}
						expandRowByClick={true}
						dataSource={dataSource}
						onExpand={this.onExpand}
						rowKey={record => `${record.quantity}-${record.pnl}-${record.fee}-${record.fee}-${record.openTime}
						-${record.closeTime}-${record.period}`}
						pagination={false}
					/>
					{
						dataPage?<Pagination 
							showSizeChanger 
							onShowSizeChange={this.onShowSizeChange}
							onChange={this.onCurrentChange}
							current={dataPage.currentpage} 
							total={dataPage.totalnum}
							pageSize={dataPage.pagesize}
							pageSizeOptions={pageSizeOptions}
							showTotal={total => ` 共 ${total}条数据`}
						/>:null
					}
				</Row>
			</Card>
		)
	}
}

TradeRecords.defaultProps={
	begindate: null,
	enddate: null,
	tradeRecords:{}
}

export default connect()(TradeRecords)
